import React, { useState } from 'react'
import { Button, SearchBar, Space, Toast } from 'antd-mobile'
import { useNavigate } from 'react-router-dom'
import { useDispatch } from 'react-redux'
import { adds, dels,del } from '../../../store/login/index'
import { useSelector } from 'react-redux'
import { DeleteOutline, DownOutline, UpOutline } from 'antd-mobile-icons'
import '../../../App.css'

export default function Sousuo() {   
  const [text,setText] = useState('')
  const navigate = useNavigate()
  const jilu = useSelector(store => store.login.jilu)
  const [sc, setSc] = useState(true)
  const dispatch = useDispatch()
  const [nut, setNut] = useState(true)

  const add = () => {
    dispatch(adds(text))
    navigate(`/lists?name=${text}`)
  }
  return (
    <div>
      <div>
        <SearchBar placeholder='请输入内容' value={text} onChange={(key)=>{setText(key)}}
          clearOnCancel={true} showCancelButton={() => true} onCancel={()=>{navigate(-1)}}
          onSearch={add} />
      </div>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', margin: '0 10px',fontSize:'5rem' }}>
        <h5>搜索历史</h5>
        <div className={sc ? '' : 'dd'}>
          <DeleteOutline onClick={() => { setSc(false) }} />
        </div>
        <div className={sc ? 'dd' : ''}>
          <span onClick={() => { dispatch(dels()) }}>全部删除</span>
          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
          <span style={{ color: 'red' }} onClick={() => { setSc(true) }}>完成</span>
        </div>
      </div>
      <div className={sc ? '' : 'dd'}>
        <div className={nut ? '' : 'dd'}>
          {
            jilu.slice(0, 8).map((item, index) => {
              return (
                <Space wrap key={index}>
                  <Button onClick={()=>{navigate(`/lists?name=${item}`)}} size='mini'>{item}</Button>
                </Space>
              )
            })
          }<Button onClick={() => { setNut(false) }} size='mini'><DownOutline /></Button>
        </div>
        <div className={nut ? 'dd' : ''}>
          {
            jilu.map((item, index) => {
              return (
                <Space wrap key={index}>
                  <Button onClick={()=>{navigate(`/lists?name=${item}`)}} size='mini'>{item}</Button>
                </Space>
              )
            })
          }<Button onClick={() => { setNut(true) }} size='mini'><UpOutline /></Button>
        </div>
      </div>
      <div className={sc ? 'dd' : ''}>
        <div>
          {
            jilu.map((item, index) => {
              return (
                <Space wrap key={index}>
                  <Button onClick={()=>{dispatch(del(item))}} size='mini'>{item}X</Button>
                </Space>
              )
            })
          }
        </div>
      </div>
    </div>
  )
}
